<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="som-builder-results">
  <template>
    <style>
      .gray {
        background: #E7E7E7;
      }
      .pass {
        background: #6AFF3F;
      }
      .crash, .fail {
        background: #000;
      }
      .crash A, .fail A {
        color: white;
      }
      .flake {
        background: #9e9e9e;
      }
      .unknown {
        background: white;
        border: 1px solid lightgray;
      }
      p {
        font: 1.1em;
        font-family: 'Roboto', 'Noto', sans-serif;
        color: rgba(0, 0, 0, 0.87);
      }
      .square {
        width: 15px;
        height: 15px;
        font-size: 8pt;
        text-align: center;
      }
      .square-container {
        padding: 1px;
      }
      .row-item {
        display: table-cell;
      }
      .results-sections {
        display: table;
      }
      P.row-item {
        padding-right: 1em;
      }
    </style>
    <div class="results-section">
      <p class="row-item">[[builderResults.builder_name]]</p>
      <template is="dom-repeat" items="{{_getRenderedObjects(builderResults.results)}}">
        <div class="square-container row-item">
          <div class$="square [[item.colorClass]]" title$="[[item.toolTip]]">
          <a href$="[[item.link]]" target="_blank">[[item.text]]</a>
          </div>
        </div>
      </template>
    </div>
  </template>
  <script>
    'use strict';

    class SomBuilderResults extends Polymer.Element {
      static get is() { return 'som-builder-results'; }

      ready() {
        super.ready();
      }

      static get properties() {
        return {
          builderResults: {
            type: Object,
            value: () => {
              return {builder_name:'', total_failures:0, results:[]};
            },
          },
          masterName: String,
        }
      }

      _getRenderedObjects(results) {
        if (!results) return [];
        let renderedObjects = [];
        results.forEach(result => {
          if (!result.actual) return;
          let results = new Set();
          result.actual.forEach((res) => { results.add(res); });
          // TODO(seanmccullough): Firgure out test-results' color scheme.
          // It currently makes no sense to me, but I imagine users have
          // internalized over the years. We shouldn't surprise them
          // unnecessarily.
          let color = 'unknown';
          if (results.has('PASS') && results.has('FAIL')) {
            color = 'flake';
          } else if (results.has('PASS')) {
            color = 'pass';
          } else if (results.has('FAIL')) {
            color = 'fail';
          } else if (results.has('CRASH')) {
            color = 'crash';
          }
          let toolTip = result.actual.join(' ');
          toolTip += '\n' + 'Build: ' + result.build_number + '\n' +
              'Commit position: ' + result.revision;
          let object = {
            colorClass: color,
            toolTip: toolTip,
            link: 'https://ci.chromium.org/buildbot/' + this.masterName +
                '/' + this.builderResults.builder_name + '/' + result.build_number,
            text: result.actual.length || '?',
          };
          renderedObjects.push(object);
        });
        return renderedObjects;
      }
    }

    customElements.define(SomBuilderResults.is, SomBuilderResults);
  </script>
</dom-module>
